<template>
    <div class="outDiv" :style="{ background: getItemColor }">
        <div class="common-layout">
            <el-container style="height: 100vh;">
                <el-aside width="200px" class="Aside">
                    <p>Vue BackOffice Arco</p>
                    <el-radio-group v-model="isCollapse"
                        style="margin-bottom: 20px;display: flex;justify-content: center;">
                        <el-radio-button :label="false">Expand</el-radio-button>
                        <el-radio-button :label="true">Collapse</el-radio-button>
                    </el-radio-group>
                    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                        @close="handleClose">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon style="color: #000000;">
                                    <Odometer />
                                </el-icon>
                                <span>仪表盘</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" style="font-family: fantasy; color: lightcoral;"
                                    @click="btnToOneSpeed">1
                                    Speed</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="1-2" style="font-family: fantasy; color: lightcoral;"
                                    @click="btnToTwoSpeed">2
                                    Speed</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="1-3" style="font-family: fantasy; color: lightcoral;"
                                    @click="btnToThreeSpeed">3
                                    Speed</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon style="color: #000000;">
                                    <Menu />
                                </el-icon>
                                <span>项目</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">代办事项</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="2-2"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">大学生志愿者服务</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="2-3"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">课后作业</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <Tools />
                                </el-icon>
                                <span>设置</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">个人信息管理</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="3-2"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">账户与安全设置</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="3-3"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;"
                                    @click="btnToPersonality">个性化设置</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="3-4"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;">帮助与反馈</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="3-5"
                                    style=" font-family: cursive;color: lightcoral;font-size: large;"
                                    @click="btnExit">退出</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-header class="Header" :style="{ background: getItemColor }"></el-header>
                    <el-main class="Main">
                        <div class="center" :id="userClickSection">
                            <router-view></router-view>
                        </div>
                        <div class="right">

                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// == 变量初始化-开始 ==
const isCollapse = ref(true)
var router = useRouter()
var userClickSection = ref();
let getItemColor = localStorage.getItem('color')
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
// == 变量初始化-结束 ==

// == 函数定义-开始 ==
function btnExit() {
    // 用户退出并清除本地存储 使用户登陆状态为未登录
    localStorage.removeItem('user');
    router.push('/')
}

function btnToOneSpeed() {
    userClickSection.value = "dashSpeedFirst"
    router.push({ hash: '#dashSpeedFirst', name: 'FirstSpeed' })
}
function btnToTwoSpeed() {
    userClickSection.value = "dashSpeedSecond"
    router.push({ hash: '#dashSpeedSecond', name: 'SecondSpeed' })
}
function btnToThreeSpeed() {
    userClickSection.value = "dashSpeedThird"
    router.push({ hash: '#dashSpeedThird', name: 'ThirdSpeed' })
}
function btnToPersonality() {
    userClickSection.value = "personality"
    router.push({ hash: '#personality', name: 'Personality' })
}
// == 函数定义-结束 ==

</script>
<style scoped>
.el-input__wrapper {
    background-color: #000000;
    color: #ffffff;
    box-shadow: none;
    outline: none;
}

.el-header {
    background-color: #ffffff;
}

p {
    width: 180px;
    margin: 14% auto;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    font-family: fantasy;
}

.outDiv {
    width: 100%;
    height: 100vh;
}

.Aside {
    /* background-color: #000c17; */
}

.Header {}

.Main {
    /* background-color: #f1f2f4; */
    display: flex;
}

.Main .center {
    width: 80%;
    height: 100vh;
}

.Main .right {
    width: 18%;
    margin-left: 2%;
    height: 100vh;
    /* background-color: #ffffff; */
}
</style>